<template>
  <div class="tab_box">
    <div class="tab_list" :style="{ height: tabHeight }">
      <slot></slot>
      <div
        @click="handAddTab()"
        class="el-icon-plus add_icon"
        style="color: #000000; font-size: 12px"
      ></div>
    </div>
    <!-- </div> -->
    <div
      class="open_btn"
      v-if="data.length >= 11 && tabHeight == '100%'"
      @click="closeOpenTab('70px')"
    >
      <span class="title"> 关闭全部标签 </span>
      <svg-icon icon-class="open" class="open_icon"></svg-icon>
    </div>
    <div class="open_btn close_btn" v-else @click="closeOpenTab('100%')">
      <svg-icon icon-class="open" class="open_icon"></svg-icon>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {},
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tabHeight: "100%",
    };
  },
  created() {
    // this.$on("handTab", (type, item) => {
    //   // this.$emit("handTab", type, item);
    //   // this.value = item.id;
    //   // if (item && item.id) {
    //   //   this.$emit("input", item.id);
    //   // }
    // });
  },
  provide() {
    return {
      MTbas: this,
    };
  },
  methods: {
    closeOpenTab(px) {
      this.tabHeight = px;
    },
    handAddTab() {
      this.$emit("handTab", "add");
    },
  },
};
</script>

<style lang='scss' scoped>
.tab_box {
  .tab_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow-y: auto;
  }
  .open_btn {
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #f5f5f5;
    margin-top: 10px;
    position: relative;
    padding: 6px 0;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    .open_icon {
      position: absolute;
      bottom: -7px;
      transform: rotate(-90deg);
    }
    .title {
      font-size: 12px;
      color: #666666;
    }
  }
  .close_btn {
    border-top: 0;
    margin-top: 0;
    .open_icon {
      position: absolute;
      bottom: -10px;
      transform: rotate(90deg);
    }
  }
  .add_icon {
    cursor: pointer;
    height: 35px;
    width: 20%;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>